<template>
	<view class="">
		<movable-area class="dev-area-box" :style="{'height':`${areaHeight}px`}">
			<movable-view :id="item.devuiId" out-of-bounds :friction="1" :disabled="disabled" :animation="animation"
				:class="!disabled&&currentIndex===index?'dev-view-box-act':'dev-view-box'"
				:style="{'height':`${itemHeight}px`}" :x="item.x" :y="item.y" direction="all"
				@touchend="touchend($event,item.sort)" @touchmove="touchmove($event,item.devuiId,index)"
				@change="onChange($event,item.sort)" @longpress="logoTime(index)" v-for="(item,index) in currentData"
				:key="item.sort">
				<view class="dev-every-list-box">
					<view class="">
						{{item.indicName}}
					</view>
					<view class="" @change="enableCloseIndicator(item.userIndicId)">
						<!-- {{item.enableFlag?'开启':'关闭'}} -->
					<!-- 	<switch v-if="item.userIndicId" @change="enableCloseIndicator(item.userIndicId)" :checked="item.enableFlag" />
						<switch v-else @change="enableCloseIndicator(item.userIndicId)" :checked="item.enableFlag" /> -->
						<u-switch @change="enableCloseIndicator(item.userIndicId)" v-model="item.enableFlag" size="40" active-color="#81C042" inactive-color="#9B9B9B"
							:active-value="1" :inactive-value="0"></u-switch>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>

import uSwitch from "@/uview-ui/components/u-switch/u-switch.vue"
	export default {
		components: {
			uSwitch,
		},
		props: {
			//label key 值
			labelKey: {
				type: [String, Number],
				default: 'label'
			},
			// 每个列表高度
			itemHeight: {
				type: [String, Number],
				default: 50
			},
			//数组
			list: {
				type: Array,
				default: () => ([])
			},
			//默认排序参数
			sortKey: {
				type: [String, Number],
				default: 'sort'
			},
			//是否显示动画
			animation: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				areaHeight: this.calculationHeight(this.list),
				currentData: this.boxPosition(this.list),
				currentSort: '', //当前到达的值
				disabled: true, //默认情况不禁止
				currentIndex: '', //当前点击的下标
				cacheTime: false, //是否计算
			}
		},
		watch: {
			list(newValue, oldValue) {
				this.currentData = this.boxPosition(newValue);
				this.areaHeight = this.calculationHeight(newValue)
			}
		},
		created() {
			// this.boxPosition(this.list);
		},
		methods: {
			//启用关闭指标
			enableCloseIndicator(id) {
				this.$https.put(global.apiUrls.enableCloseIndicator, {
					userIndicId: id
				}).then(res => {
					if (res.data.code == 1000) {
						this.$message.info('修改成功')
					} else {
						this.$message.info('修改失败')
					}
				})
			},

			//长按开始滑动
			logoTime(index) {
				this.currentIndex = index;
				this.disabled = false;
			},
			//计算父盒子高度
			calculationHeight(val) {
				return val.length * this.itemHeight;
			},
			//计算列表盒子值
			boxPosition(val) {
				let _this = this;
				let list = JSON.parse(JSON.stringify(val))
				list.forEach((v, i) => {
					v['y'] = i * _this.itemHeight;
					v['x'] = 0;
					v['sort'] = i;
					v['devuiId'] = 'dev' + i
				})
				console.log(list, 'list数据')
				return list
			},
			//拖拽移动
			touchmove(e, ref, index) {
				if (this.disabled) return
				uni.createSelectorQuery().in(this).select(`#${ref}`).boundingClientRect(data => {
					// console.log(data)
				}).exec();
			},

			//手指松开
			touchend(e, sort) {
				if (this.disabled) return
				this.disabled = true;
				console.log('排序成功')
				// console.log(sort,this.currentSort, '当前sort')
				let oldValue = 0;
				let list = JSON.parse(JSON.stringify(this.currentData))
				let index = 0;
				let oldSort = sort;
				let nowSortIndex = 0;
				list.forEach((v, i) => {
					if (v.sort == sort) {
						oldValue = v.y
						index = i
					}
					if (v.sort == this.currentSort) {
						nowSortIndex = i;
					}
				})
				//当选中的值等于 当前到达的值
				list[index].y = list[nowSortIndex].y
				list[index].sort = list[nowSortIndex].sort
				//当前到达的值等于 最初值
				list[nowSortIndex].y = oldValue;
				list[nowSortIndex].sort = oldSort;
				this.currentData = list;
				this.$emit('change',this.currentData)
				console.log(this.currentData, '修改后的数据')
				 this.$forceUpdate()

				// console.log(this.currentData[index], this.currentData[nowSortIndex], '是个啥')

			},
			//当数据发生变化
			onChange(e, sort) {
				if (!this.disabled) {
					// console.log(sort, '正在动')
					let index = Math.ceil(e.detail.y / this.itemHeight);
					if (index > this.currentData.length - 1) index = this.currentData.length - 1;
					if (index < 0) index = 0;
					this.currentSort = index;
				}

			}
		}
	}
</script>

<style lang="scss">
	.dev-area-box {
		width: 100%;

		// background-color: #fff;
		.dev-view-box {
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			display: flex;
			align-items: center;
			width: 100%;
			height: 49px;
			border-bottom: 1px solid #F5F5F5;
			background-color: #fff;
			z-index: 1;
		}

		.dev-view-box-act {
			padding: 0rpx 30rpx;
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #fff;
			z-index: 2;
			box-sizing: border-box;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(173, 173, 173, 0.25);
		}

		.dev-every-list-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

	}
</style>
